<script setup lang="ts">
import { ref, reactive } from "vue";
const props = defineProps({
  banner: {
    type: Array<any>,
    default: () => [],
  },
  height: {
    type: String,
    default: "200px",
  },
});

const carouselChange = (song: object) => {
  console.log(song);
};
</script>

<template>
  <div class="home-banner">
    <el-skeleton animated :loading="banner.length <= 0">
      <template #template>
        <el-skeleton-item variant="caption" :style="{ height: height }" />
      </template>
      <template #default>
        <el-carousel :interval="4000">
          <template v-for="item in banner" :key="item.targetId">
            <el-carousel-item
              style="border-radius: 20px"
              v-if="item.targetType === 1"
              @click="carouselChange(item.song)"
            >
              <el-image :src="item.imageUrl" fit="fill" style="width: 100%">
              </el-image>
            </el-carousel-item>
          </template>
        </el-carousel>
      </template>
    </el-skeleton>
  </div>
</template>

<style scoped lang="scss">
.home-banner {
  border-radius: 20px;
}
:deep .el-carousel__container {
  border-radius: 20px;
  overflow: hidden;
}
</style>
